<script lang="ts" setup>
import {onMounted, reactive, ref, toRaw, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {getSendByIdAPI, updateSendStatusAPI} from "@/apis/send.ts";
import {CopyOutlined, QuestionCircleOutlined, UserOutlined} from "@ant-design/icons-vue";
import dayjs, {type Dayjs} from "dayjs";
import type {Rule} from "ant-design-vue/es/form";
import {useInfoStore} from "@/store/user/user.ts";
import {message} from "ant-design-vue";
import {addInterviewAPI} from "@/apis/interview.ts";
import router from "@/router";
import {addNewAPI} from "@/apis/new.ts";
import {getResumeByIdAPI} from "@/apis/resume.ts";

//表单数据
interface FormState {
  resumeId: string;
  resumeJobseekerId: string;
  resumeAvatar: string;
  resumeUsername: string;
  resumeGender: string;
  resumeAge: number | undefined;
  resumePhone: string;
  resumeAddress: string;
  resumeEducationSchool: string;
  resumeEducationMajor: string;
  resumeEducationDegree: string;
  resumeSchoolExperience: string;
  resumeEducationEndDate: Dayjs | undefined;
  resumeWorkExperience: string;
  resumeSkillDescription: string;
  resumeCertificates: string;
  resumePersonalProfile: string;
  resumePrivacySetting: string;
  resumeExpectedJob: string;
  resumeExpectedWorkAddress: string;
  resumeExpectedSalary: number | undefined;
  resumeExpectedSalaryType: string;
}

const formState: UnwrapRef<FormState> = reactive({
  sendId: '',

  jobId: '',
  jobStatus: '',
  jobEmployerId: '',
  jobTitle: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobStartDate: '',
  jobEndDate: '',
  jobWorkingHours: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',
  rangeValue: [null, null],

  resumeId: "",
  resumeJobseekerId: "",
  resumeAvatar: "",
  resumeUsername: "",
  resumeGender: "",
  resumeAge: undefined,
  resumePhone: "",
  resumeAddress: "",
  resumeEducationSchool: "",
  resumeEducationMajor: "",
  resumeEducationDegree: "",
  resumeSchoolExperience: "",
  resumeEducationEndDate: undefined,
  resumeWorkExperience: "",
  resumeSkillDescription: "",
  resumeCertificates: "",
  resumePersonalProfile: "",
  resumePrivacySetting: "不公开",
  resumeExpectedJob: "",
  resumeExpectedWorkAddress: "",
  resumeExpectedSalary: undefined,
  resumeExpectedSalaryType: "",
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.resumeId = route.params.resumeId as string;
  getResumeInfo()
})
const imageUrl = ref<string>('');
//获取岗位信息
const getResumeInfo = async () => {
  getResumeByIdAPI({resumeId: formState.resumeId}).then((res) => {
    if (res.data.flag) {
      formState.resumeId = res.data.data.resumeId;
      formState.resumeAvatar = res.data.data.resumeAvatar;
      formState.resumeUsername = res.data.data.resumeUsername;
      formState.resumeGender = res.data.data.resumeGender;
      formState.resumeAge = res.data.data.resumeAge;
      formState.resumePhone = res.data.data.resumePhone;
      formState.resumeAddress = res.data.data.resumeAddress;
      formState.resumeEducationSchool = res.data.data.resumeEducationSchool;
      formState.resumeSchoolExperience = res.data.data.resumeSchoolExperience;
      formState.resumeEducationMajor = res.data.data.resumeEducationMajor;
      formState.resumeEducationDegree = res.data.data.resumeEducationDegree;
      formState.resumeEducationEndDate = dayjs(res.data.data.resumeEducationEndDate);
      formState.resumeSkillDescription = res.data.data.resumeSkillDescription;
      formState.resumeWorkExperience = res.data.data.resumeWorkExperience;
      formState.resumeCertificates = res.data.data.resumeCertificates;
      formState.resumePersonalProfile = res.data.data.resumePersonalProfile;
      formState.resumePrivacySetting = res.data.data.resumePrivacySetting;
      formState.resumeExpectedJob = res.data.data.resumeExpectedJob;
      formState.resumeExpectedWorkAddress = res.data.data.resumeExpectedWorkAddress;
      formState.resumeExpectedSalary = res.data.data.resumeExpectedSalary;
      formState.resumeExpectedSalaryType = res.data.data.resumeExpectedSalaryType;

      //获取头像
      if (formState.resumeAvatar !== null) {
        imageUrl.value = "http://localhost:8080/image/download?name=" + formState.resumeAvatar;
      }

    }
  })
}


</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="首页"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="main">
      <div class="resume">
        <div class="title">
          <h1 style="color: #4D7181;font-size: 30px">个人简历</h1>
          <div style="display: flex;float: right">
            <CopyOutlined class="icon" style="margin-right: 10px"/>
            <UserOutlined class="icon"/>
          </div>

        </div>
        <div class="content">
          <a-form
              ref="formRef"
              :model="formState"
          >
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">基本信息</a-divider>
            <div class="basic">
              <div class="basicInfo">
                <a-form-item ref="resumeUsername" label="姓名" name="resumeUsername">
                  <a-input v-model:value="formState.resumeUsername" :disabled="true" style="width: 100px;"/>
                </a-form-item>
                <a-form-item ref="resumeAge" label="年龄" name="resumeAge">
                  <a-input-number v-model:value="formState.resumeAge" :disabled="true" style="width: 100px;"/>
                </a-form-item>
                <a-form-item ref="resumeGender" label="性别" name="resumeGender">
                  <a-select v-model:value="formState.resumeGender" :disabled="true" style="width: 100px;">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item ref="resumePhone" label="联系电话" name="resumePhone">
                  <a-input v-model:value="formState.resumePhone" :disabled="true" style="width: 300px;"/>
                </a-form-item>
                <a-form-item ref="resumeAddress" label="居住地址" name="resumeAddress">
                  <a-input v-model:value="formState.resumeAddress" :disabled="true" style="width: 300px;"/>
                </a-form-item>
              </div>
              <div class="update">
                <a-upload
                    :disabled="true"
                    :show-upload-list="false"
                    action="http://localhost:8080/image/upload"
                    class="avatar-uploader"
                    list-type="picture-card"
                    name="file"

                >
                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width: 120px; height: 150px;"/>
                  <div v-else>
                    <div class="ant-upload-text">上传照片</div>
                  </div>
                </a-upload>
              </div>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">教育背景</a-divider>
            <div class="school">
              <a-form-item ref="resumeEducationSchool" label="学校名称" name="resumeEducationSchool">
                <a-input v-model:value="formState.resumeEducationSchool" :disabled="true" style="width: 180px; "/>
              </a-form-item>
              <a-form-item ref="resumeEducationMajor" label="所学专业" name="resumeEducationMajor"
                           style="margin-left: 50px">
                <a-input v-model:value="formState.resumeEducationMajor" :disabled="true" style="width: 180px; "/>
              </a-form-item>
            </div>
            <div class="school">
              <a-form-item ref="resumeEducationDegree" label="最高学历" name="resumeEducationDegree">
                <a-select v-model:value="formState.resumeEducationDegree" :disabled="true" placeholder="请选择最高学历！"
                          style="width: 180px;">
                  <a-select-option value="大专">大专</a-select-option>
                  <a-select-option value="本科">本科</a-select-option>
                  <a-select-option value="硕士">硕士</a-select-option>
                  <a-select-option value="博士">博士</a-select-option>
                  <a-select-option value="其他">其他</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item ref="resumeEducationEndDate" label="毕业时间" name="resumeEducationEndDate"
                           style="margin-left: 50px">
                <a-date-picker v-model:value="formState.resumeEducationEndDate" :disabled="true" style="width: 180px;"/>
              </a-form-item>
            </div>

            <div class="school">
              <a-form-item ref="resumeSchoolExperience" label="校园经历"
                           name="resumeSchoolExperience">
                <a-textarea v-model:value="formState.resumeSchoolExperience" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>

            <div class="school">
              <a-form-item ref="resumeCertificates" label="荣誉奖项"
                           name="resumeCertificates">
                <a-textarea v-model:value="formState.resumeCertificates" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>

            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">技能特长</a-divider>
            <div class="school">
              <a-form-item ref="resumeSkillDescription" label="技能特长"
                           name="resumeSkillDescription">
                <a-textarea v-model:value="formState.resumeSkillDescription" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">工作经历</a-divider>
            <div class="school">
              <a-form-item ref="resumeWorkExperience" label="工作经历"
                           name="resumeWorkExperience">
                <a-textarea v-model:value="formState.resumeWorkExperience" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">自我介绍</a-divider>
            <div class="school">
              <a-form-item ref="resumePersonalProfile" label="自我介绍"
                           name="resumePersonalProfile">
                <a-textarea v-model:value="formState.resumePersonalProfile" :auto-size="{minRows: 4, maxRows: 10}"
                            :disabled="true"
                            :maxlength="300"
                            show-count
                            style="width: 600px"
                />
              </a-form-item>
            </div>
            <a-divider orientation="left" style="color:#4D7181; font-size: 20px">工作期望</a-divider>
            <div class="school">
              <a-form-item ref="resumeExpectedJob" label="期望职位" name="resumeExpectedJob">
                <a-input v-model:value="formState.resumeExpectedJob" :disabled="true" style="width: 180px; "/>
              </a-form-item>
              <a-form-item ref="resumeExpectedSalary" label="期望薪资" name="resumeExpectedSalary"
                           style="margin-left: 50px">
                <a-input-number v-model:value="formState.resumeExpectedSalary" :disabled="true" style="width: 180px; "/>
              </a-form-item>

            </div>
            <div class="school">
              <a-form-item ref="resumeExpectedSalaryType" label="期望薪资类型" name="resumeExpectedSalaryType"
                           style="margin-left: 50px">
                <a-select v-model:value="formState.resumeExpectedSalaryType" :disabled="true" style="width: 100px;">
                  <a-select-option value="时薪">时薪</a-select-option>
                  <a-select-option value="日薪">日薪</a-select-option>
                  <a-select-option value="月薪">月薪</a-select-option>
                  <a-select-option value="均可">均可</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item ref="resumeExpectedWorkAddress" label="期望工作地点" name="resumeExpectedWorkAddress"
                           style="margin-left: 50px">
                <a-input v-model:value="formState.resumeExpectedWorkAddress" :disabled="true" style="width: 180px; "/>
              </a-form-item>
            </div>
          </a-form>


        </div>
      </div>
    </div>


  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;


  .main {
    width: 100%;
    flex-grow: 1;
    height: 90%;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .job {
      margin: 0 20px 20px;
      border-radius: 10px;
      padding: 10px 30px 30px;
      border: 1px solid #ccc;
      height: auto;
      overflow: auto; /* 或者使用 overflow: hidden; */

      .check-button {
        border: 2px solid #1E80FF;
        padding: 25px;
        border-radius: 20px;
        display: flex;
        float: right;
      }
    }

    .resume {
      max-width: 900px;
      margin: 20px;
      padding: 20px 60px;
      border: 1px solid #ccc;
      border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */
      background-color: white;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
          font-size: 35px;
          padding: 15px;
          color: white;
          background-color: #C09E66;
          border-radius: 50px;
          margin-bottom: 10px;
        }
      }

      .content {
        border: 2px solid #4D7181;
        padding: 20px;
        border-top: 20px solid #4D7181;
        border-radius: 10px;

        .basic {
          display: flex;
          padding-left: 30px;
          justify-content: space-between;

          .basicInfo {
            width: 70%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap; /* 允许子元素换行 */
            gap: 0 30px; /* 设置水平间距为10px，垂直间距为0 */
          }

          .update {
            width: 120px;
            height: 150px;
            margin-right: 60px;
          }
        }

        .school {
          display: flex;
          padding-left: 30px;
        }
      }
    }
  }


}


</style>
